<template>
   <!-- This footer should hidden by default and shown when there are todos -->
      <footer class="footer" v-if="list.length>0">
        <!-- This should be `0 items left` by default -->
        <span class="todo-count"><strong>{{getSum}}</strong> item left</span>
        <!-- Remove this if you don't implement routing -->
        <ul class="filters">
          <li>
            <a :class="{selected:type==='all'}" @click="typeC('all')" href="#/">All</a>
          </li>
          <li>
            <a href="#/active" :class="{selected:type==='active'}" @click="typeC('active')">Active</a>
          </li>
          <li>
            <a href="#/completed" :class="{selected:type==='completed'}" @click="typeC('completed')">Completed</a>
          </li>
        </ul>
        <!-- Hidden if no completed items are left ↓ -->
        <button class="clear-completed" v-show="isShow" @click="filter">Clear completed</button>
      </footer>
</template>

<script>
export default {
   props:{
       list:{
           type:Array,
           required:true
       },
       type:{
           type:String,
           default:'all'
       }
   },
   computed:{
       getSum(){
           return this.list.filter(item=>!item.isDone).length
       },
       isShow(){
           return this.list.some(item=>item.isDone)
       }
   },
   methods:{
       filter(){
           this.$emit('filter')
       },
       typeC(type){
         this.$emit('typeC',type)
       }
   }
}
</script>

<style>

</style>